<template>
  <div 
    class="derOnlyOneContainer _containers"
    :style="{
      transformOrigin: 'top left',
      left: `${left}px`,
      top: `${top}px`,
    }"
  >
    <MyFormula ref="canvas"></MyFormula>
    <Title title="公式编辑器" @close="close" @getPosition="getPosition" />
  </div>
</template>

<script>
import MyFormula from './myFormula.vue';
import closeIcon from '../../../assets/teaching/close.svg';
import Title from '../panel/title.vue';

export default {
  components: { MyFormula, Title },
  props: { value: Boolean },
  data() {
    return {
      left: 0,
      top: 0,
      closeIcon,
      _isMouseDown: false, // 用于跟踪鼠标是否按下
    };
  },
  methods: {
    // Title 组件返回的 x, y值
    getPosition({ x, y }) {
      this.left = x;
      this.top = y;
    },
    close() {
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
._containers {
  width: 55em; /* 880px converted to em */
  // max-height: 36.25em; /* 580px converted to em */
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 1em 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px; /* 7px converted to em */
  // cursor: move;
  position: relative;

  .start_page {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column; /* 将子元素垂直排列 */
    justify-content: center; /* 在垂直方向上居中对齐 */
    align-items: center; /* 在水平方向上居中对齐 */
  }
}
</style>
